<html>
	<head>
		<style>
			#VisualLayer
			{
				
			}
		</style>
		<script type="text/javascript">
			window.setInterval("refresh()", 50);
			
			var scale = 100;
			var focus = NULL;
		
			function MouseWheelHandler(e) {
				// cross-browser wheel delta
				var e = window.event || e; // old IE support
				if (e.wheelDelta > 0)
					scale += 10;
				else
					scale -= 10;
				return false;
			}
			
			function refresh()
			{
				defaultContext();
				
				var canvas = document.getElementById('VisualLayer');
				var context = canvas.getContext("2d");
				
				var columns = 2;
				var rows = 2;
				
				var width = scale;
				var height = scale;
				
				context.font="18px mono";
				context.fillText(scale, 20, 50);
				context.fillText(focus, 20, 90);
				
				context.beginPath();
				context.rect(canvas.offsetWidth/2 - width, canvas.offsetHeight/2 - height, width, height);
				context.fillStyle = 'green';
				context.shadowOffsetX = 5;
				context.shadowOffsetY = 5;
				context.shadowColor = "gray";
				context.fill();
				
				context.beginPath();
				context.rect(canvas.offsetWidth/2, canvas.offsetHeight/2 - height, width, height);
				context.fillStyle = 'yellow';
				context.shadowOffsetX = 5;
				context.shadowOffsetY = 5;
				context.shadowColor = "gray";
				context.fill();
				
				context.beginPath();
				context.rect(canvas.offsetWidth/2 - width, canvas.offsetHeight/2, width, height);
				context.fillStyle = 'red';
				context.shadowOffsetX = 5;
				context.shadowOffsetY = 5;
				context.shadowColor = "gray";
				context.fill();
				
				context.beginPath();
				context.rect(canvas.offsetWidth/2, canvas.offsetHeight/2, width, height);
				context.fillStyle = 'blue';
				context.shadowOffsetX = 5;
				context.shadowOffsetY = 5;
				context.shadowColor = "gray";
				context.fill();
			}
			
			function defaultContext()
			{
				var canvas = document.getElementById('VisualLayer');
				var context = canvas.getContext("2d");
				canvas.width = canvas.width;
				context.shadowOffsetX = 0;
				context.shadowOffsetY = 0;
				context.fillStyle = 'black';
			}
		</script>
	</head>
	<body>
	
		<canvas id="VisualLayer" width="800" height="600" style="border:3px solid #000000;"/>
		<script>
			var myimage = document.getElementById("VisualLayer");
			if (myimage.addEventListener) {
				// IE9, Chrome, Safari, Opera
				myimage.addEventListener("mousewheel", MouseWheelHandler, false);
				// Firefox
				myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
			}
			// IE 6/7/8
			else myimage.attachEvent("onmousewheel", MouseWheelHandler);
		</script>
	</body>
</html>